<template>
  <div class="view-container" id="index">
    <dv-full-screen-container class="view-bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="view-wrapper">
        <div class="view-top">
          <dv-decoration-10 style="width:30%;height:5px;" />
          <div class="view-title">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:25%;height:100%;" />
            <div class="view-title-in">
              <span class="view-title-text">政治生态监察评估系统</span>
              <dv-decoration-6
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:60%;height:8px;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:25%;height:100%;"
            />
          </div>
          <dv-decoration-10 style="width:30%;height:5px;transform: rotateY(180deg);" />
        </div>

        <div class="view-main">
          <div class="chart-list" style="width:30%">
            <div class="chart-list-item" ref="chartRef1" style="height:50%">
              <dv-border-box-12>
                <dv-decoration-7 class="chart-title">
                  <span class="text" @click="$router.push('/dashboard/ecology')">生态指数</span>
                </dv-decoration-7>
                <Radar
                  :sourceData="chart1.sourceData"
                  :height="chart1.height"
                  :padding="chart1.padding"
                />
              </dv-border-box-12>
            </div>

            <div class="chart-list-item" ref="chartRef2" style="height:50%">
              <dv-border-box-12>
                <dv-decoration-7 class="chart-title">
                  <span class="text">考核占比</span>
                </dv-decoration-7>
                <Pie :sourceData="chart2.sourceData" :height="chart2.height" />
              </dv-border-box-12>
            </div>
          </div>

          <div class="chart-list" style="width:40%">
            <div>
              <dv-border-box-12>
                <!-- <Radar :sourceData="chart1.sourceData" :height="chart1.height" /> -->
              </dv-border-box-12>
            </div>
          </div>

          <div class="chart-list" style="width:30%">
            <div class="chart-list-item" style="height:33%">
              <dv-border-box-12>
                <dv-decoration-7 class="chart-title">
                  <span class="text">等级评定</span>
                </dv-decoration-7>
                <div class="chart5">
                  <div class="chart5-item" v-for="(item, index) in chart5.sourceData" :key="index">
                    <div class="count" :style="{ backgroundColor: item.color }">
                      {{ item.count }}
                    </div>
                    <p class="text" :style="{ color: item.color }">{{ item.title }}</p>
                  </div>
                </div>
                <!-- <Bar :sourceData="chart4.sourceData" :height="chart4.height" /> -->
              </dv-border-box-12>
            </div>

            <div class="chart-list-item" ref="chartRef4" style="height:33%">
              <dv-border-box-12>
                <dv-decoration-7 class="chart-title">
                  <span class="text">考核排名</span>
                </dv-decoration-7>
                <Bar :sourceData="chart4.sourceData" :height="chart4.height" />
              </dv-border-box-12>
            </div>

            <div class="chart-list-item" ref="chartRef3" style="height:33%">
              <dv-border-box-12>
                <dv-decoration-7 class="chart-title">
                  <span class="text">整改落实</span>
                </dv-decoration-7>
                <StackBar :sourceData="chart3.sourceData" :height="chart3.height" />
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import moment from 'moment';
import Radar from '@/components/chart/inspection/Radar';
import Pie from '@/components/chart/inspection/Pie';
import StackBar from '@/components/chart/inspection/StackBar';
import Bar from '@/components/chart/inspection/Bar';
import { chartService } from '@/services';

const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

export default {
  name: 'DataView',

  components: {
    Radar,
    Pie,
    StackBar,
    Bar,
  },

  data() {
    return {
      loading: true,
      date: {
        text: '',
        timer: null,
      },
      chart1: {
        sourceData: [],
        height: 300,
        padding: [0, 0, 30, 0],
      },
      chart2: {
        sourceData: [],
        height: 400,
      },
      chart3: {
        sourceData: [],
        height: 400,
      },
      chart4: {
        sourceData: [],
        height: 500,
      },
      chart5: {
        sourceData: [
          { title: '优秀', count: 0, color: '#0ba00b' }, // >190
          { title: '良好', count: 0, color: '#3f3fe3' }, // 170-189
          { title: '一般', count: 0, color: '#a617a6' }, // 150-169
          { title: '差', count: 0, color: '#ea9b0c' }, // <150
        ],
      },
    };
  },

  mounted() {
    this.startTimeCountDown();
    this.getData();
  },

  beforeDestroy() {
    clearInterval(this.date.timer);
    this.date.timer = null;
  },

  methods: {
    getData() {
      const p1 = this.getChart1Data();
      const p2 = this.getChart2Data();
      const p3 = this.getChart3Data();
      const p4 = this.getChart4Data();
      Promise.all([p1, p2, p3, p4]).then(() => {
        this.loading = false;

        this.$nextTick(() => {
          this.chart1.height = this.$refs.chartRef1.offsetHeight - 80;
          this.chart2.height = this.$refs.chartRef2.offsetHeight - 80;
          this.chart3.height = this.$refs.chartRef3.offsetHeight - 80;

          const height = this.$refs.chartRef4.offsetHeight;
          console.log('------------------', height);
          this.chart4.height = height - 80;
        });
      });
    },

    getChart1Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: 2020,
        inspectionCycleNumber: 3,
      };
      return new Promise(resolve => {
        chartService.getEcologyChartData(params).then(res => {
          if (res.code === '200') {
            const { year, inspectionCycle, inspectionCycleNumber } = res.data;
            const quarter = `${year}年第${inspectionCycleNumber}${inspectionCycle}`;
            this.chart1.sourceData = res.data.regulationDimension.map(ele => {
              return {
                item: ele.regulationContent,
                [quarter]: ele.totalScore,
              };
            });
            resolve();
          }
        });
      });
    },

    getChart2Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: 2020,
        inspectionCycleNumber: 3,
      };
      return new Promise(resolve => {
        chartService.getRatioChartData(params).then(res => {
          if (res.code === '200') {
            this.chart2.sourceData = res.data.deptList.map(item => {
              return {
                deptName: item.deptName,
                deptCount: item.eventCount,
              };
            });

            resolve();
          }
        });
      });
    },

    getChart3Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: 2020,
        inspectionCycleNumber: 3,
      };

      return new Promise(resolve => {
        chartService.getBarChartData(params).then(res => {
          if (res.code === '200') {
            const correctList = res.data.branchInfos.map(ele => {
              return {
                branch: ele.branchName,
                type: '已整改',
                count: ele.eventCorrectedCount,
              };
            });
            const unCorrectList = res.data.branchInfos.map(ele => {
              return {
                branch: ele.branchName,
                type: '未整改',
                count: ele.eventUnCorrectCount,
              };
            });
            this.chart3.sourceData = [...unCorrectList, ...correctList];
          }

          resolve();
        });
      });
    },

    getChart4Data() {
      const params = {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: 2020,
        inspectionCycleNumber: 3,
        type: '1',
      };
      return new Promise(resolve => {
        chartService.getBarChartData2(params).then(res => {
          if (res.code === '200') {
            // 优秀/良好/一般/差
            const countList = [0, 0, 0, 0];
            const scoreRule = [190, 170, 150];
            this.chart4.sourceData = res.data.items.map(item => {
              if (item.inspectionScore >= scoreRule[0]) {
                countList[0]++;
              } else if (item.inspectionScore >= scoreRule[1]) {
                countList[1]++;
              } else if (item.inspectionScore >= scoreRule[2]) {
                countList[2]++;
              } else {
                countList[3]++;
              }
              return {
                branch: item.inspectionBranchName,
                value: item.inspectionScore,
              };
            });

            this.chart5.sourceData = this.chart5.sourceData.map((item, index) => {
              return {
                ...item,
                count: countList[index],
              };
            });

            resolve();
          }
        });
      });
    },

    // 实时日期显示
    startTimeCountDown() {
      if (this.date.timer) {
        clearInterval(this.date.timer);
      }
      this.date.timer = setInterval(() => {
        const date = moment().format('YYYY-MM-DD HH:mm:ss');
        const day = weekday[moment().format('d')];
        this.date.text = `${date} ${day}`;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
